<template>
  <el-dialog
    title="图片剪裁"
    :visible="showDialog"
    :close-on-click-modal="modalDialog"
    :close-on-press-escape="modalDialog"
    :before-close="cancel"
    append-to-body
    width="560px"
  >
    <div class="cropper-content" :style="'height: ' + height">
      <div class="cropper" style="text-align: center" :style="'height: ' + height">
        <vueCropper
          ref="cropper"
          :img="option.img"
          :output-size="option.outputSize"
          :output-type="option.outputType"
          :info="option.info"
          :can-scale="option.canScale"
          :auto-crop="option.autoCrop"
          :auto-crop-width="option.autoCropWidth"
          :auto-crop-height="option.autoCropHeight"
          :fixed="option.fixed"
          :fixed-box="option.fixedBox"
          :fixed-number="fixedNumber"
          :mode="option.mode"
        />
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" :loading="loading" @click="finish">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { VueCropper } from 'vue-cropper'
import { uploadFile, uploadFiles } from '@/api'
import store from '@/store'
export default {
  name: 'Cropper',
  components: { VueCropper },
  props: {
    fileinfo: {
      type: File,
      default: {}
    },
    optionImg: {
      type: String,
      default: ''
    },
    fixedNumber: {
      type: Array,
      // default: function () { return [] }
      default: () => [16, 10] // 截图框的宽高比例
    },
    useType: {
      type: String,
      default: ''
    }
  },

  data() {
    return {
      modalDialog: store.getters.dialog,
      loading: false,
      showDialog: false,
      formImage: '',
      folder: this.useType,
      pageMethods: uploadFile,
      form: {
        backgroundImage: ''
      },
      height: '500px',
      // 裁剪组件的基础配置option
      option: {
        img: this.optionImg, // 裁剪图片的地址
        info: false, // 裁剪框的大小信息
        outputSize: 1, // 裁剪生成图片的质量
        outputType: 'png', // 裁剪生成图片的格式
        canScale: true, // 图片是否允许滚轮缩放
        autoCrop: true, // 是否默认生成截图框
        autoCropWidth: '500', // 默认生成截图框宽度
        autoCropHeight: '500', // 默认生成截图框高度
        fixedBox: false, // 固定截图框大小 不允许改变
        fixed: true, // 是否开启截图框宽高固定比例
        full: true, // 是否输出原图比例的截图
        canMoveBox: true, // 截图框能否拖动
        original: true, // 上传图片按照原始比例渲染
        centerBox: false, // 截图框是否被限制在图片里面
        infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
        canMove: true,
        mode: 'cover'
      }
    }
  },
  mounted() {
    const num = this.fixedNumber[1] / this.fixedNumber[0] * 500
    this.option =
    {
      img: this.optionImg, // 裁剪图片的地址
      info: false, // 裁剪框的大小信息
      outputSize: 1, // 裁剪生成图片的质量
      outputType: 'png', // 裁剪生成图片的格式
      canScale: true, // 图片是否允许滚轮缩放
      autoCrop: true, // 是否默认生成截图框
      autoCropWidth: '500', // 默认生成截图框宽度
      autoCropHeight: String(num), // 默认生成截图框高度
      fixedBox: false, // 固定截图框大小 不允许改变
      fixed: true, // 是否开启截图框宽高固定比例
      full: true, // 是否输出原图比例的截图
      canMoveBox: true, // 截图框能否拖动
      original: true, // 上传图片按照原始比例渲染
      centerBox: false, // 截图框是否被限制在图片里面
      infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
      canMove: true,
      mode: 'cover'
    }
    this.height = num + 'px'
    this.showDialog = true
  },
  methods: {
    cancel() {
      this.$emit('formClose', false)
    },
    // 将base64转换为blob
    dataURLtoBlob(dataurl) {
      var arr = dataurl.split(',')
      var mime = arr[0].match(/:(.*?);/)[1]
      var bstr = atob(arr[1])
      var n = bstr.length
      var u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new Blob([u8arr], { type: mime })
    },
    // 将blob转换为file
    blobToFile(theBlob, fileName = '111') {
      theBlob.lastModifiedDate = new Date()
      theBlob.name = fileName
      return theBlob
    },
    async finish() {
      this.loading = true
      const that = this
      this.$refs.cropper.getCropBlob((data) => {
        const fileName = 'bc' + this.fileinfo.uid + '.jpg'
        that.formImage = data
        // var file = data
        const formData = new FormData()
        const myFile = new File([data], fileName, { type: data.type })
        formData.append('file', myFile)
        formData.append('folder', that.folder)
        // 文件对象
        // 获取卡类型列表
        // return;

        uploadFiles(formData)
          .then((res) => {
            that.loading = false
            this.$emit('formSubmit', {
              insertUrl: res.insertUrl,
              showUrl: res.showUrl,
              success: res.success
            })
          })
          .catch((err) => {
            console.log('err', err)
            that.loading = false
          })
      })
    }
  }
}
</script>

<style scoped lang="scss">
.cropper-content {
  width: 100%;
  background: pink;
}

.cropper {
  width: 100%;
  background: yellow;
}
</style>
